<template>
  <div class="login">
    <div class="login-inner">
      <h3 class="inner-title">后台管理登录</h3>
      <a-form
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
      >
        <a-form-item
            label="Username"
            v-bind="validateInfos.username"
        >
          <a-input v-model:value="modelRef.username"/>
        </a-form-item>

        <a-form-item
            label="Password"
            v-bind="validateInfos.password"
        >
          <a-input-password v-model:value="modelRef.password"/>
        </a-form-item>
        <a-form-item class="btn-line" :wrapper-col="{ span: 8, offset: 8 }">
          <a-button class="reset-btn" @click="resetFields">重置</a-button>
          <a-button class="login-btn" type="primary" @click="onSubmit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {useForm} from "ant-design-vue/es/form";
import {accountStore, modelRef, rulesRef} from './config'
import {toRaw} from "vue";
import useGlobalStore from "../../store/globalModule";


const globalStore = useGlobalStore()
globalStore.setIsShowAction(false)
const {resetFields, validate, validateInfos} = useForm(modelRef, rulesRef);
const onSubmit = () => {
  validate()
      .then(async () => {
        const formData = toRaw(modelRef.value)
        await accountStore.accountLoginAction(formData)
        modelRef.value.password = ""
      })
      .catch(err => {
        console.log('error', err);
      });
};
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/full-screen.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  color: #fff;

  .login-inner {
    width: 500px;
    margin: 200px auto;
    padding: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;

    .inner-title {
      text-align: center;
      font-size: 24px;
    }

    .btn-line {
      .reset-btn {
        margin-right: 20px;
      }
    }
  }
}
</style>
